<template>
  <div class="forget" ref="forget">
    <div class="forget-wrapper">
      <v-header></v-header>
      <div class="title">忘記密碼</div>
      <p class="page-description">請輸入與您的帳號關聯的手機號碼並輸入驗證碼來重置密碼</p>
      <el-form :model="forgetForm" :rules="forgetRules" ref="forgetForm">
        <email-input-form-item :form="forgetForm"></email-input-form-item>
        <imgcode-form-item :form="forgetForm" :imgBase="imgBase" @handleImgcode="changeImgcode"></imgcode-form-item>
        <vercode-input-form-item :form="forgetForm" :showTime="showTime" :timeCount="timeCount" @handleVercode="changeVercode"></vercode-input-form-item>
      </el-form>
      <el-button class="submit-btn" @click="handleNext('forgetForm')" type="primary">下一步</el-button>
      <p @click="backToLogin" class="tip-description">返回登錄</p>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import ImgcodeFormItem from '@/components/ImgcodeFormItem'
import EmailInputFormItem from '@/components/EmailInputFormItem'
import VercodeInputFormItem from '@/components/VercodeInputFormItem'
import { getVercodeImg, sendMail } from '@/Api/request'
export default {
  name: 'forget',
  data () {
    const validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入手機號碼'))
      } else {
        if (/^[1][3,4,5,7,8][0-9]{9}$/.test(value)) {
          callback()
        } else {
          callback(new Error('手機號格式錯誤'))
        }
      }
    }
    const validateImgcode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入圖片驗證碼'))
      } else {
        callback()
      }
    }
    return {
      showTime: false,
      timeCount: 60,
      imgBase: '',
      codeid: '',
      forgetForm: {
        email: '',
        imgcode: '',
        vercode: ''
      },
      forgetRules: {
        email: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        imgcode: [
          { validator: validateImgcode, trigger: 'blur' }
        ],
        vercode: [
          { required: true, message: '請輸入驗證碼', trigger: 'blur' }
        ]
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.path === '/login') {
      next()
    } else {
      next(false)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.changeImgcode()
      this._initScroll()
    })
  },
  methods: {
    _initScroll () {
      this.forgetScroll = new this.$BScroll(this.$refs.forget, {
        click: true,
        probeType: 3,
        autoBlur: false
      })
    },
    changeImgcode () {
      this.forgetForm.imgcode = ''
      getVercodeImg().then(res => {
        if (res.status === 200) {
          this.imgBase = 'data:image/png;base64,' + res.attachment.IMGCode
          this.codeid = res.attachment.codeUUID
        } else {
          this.$message({
            message: res.message,
            center: true,
            type: 'error'
          })
        }
      })
    },
    changeVercode () {
      if (this.showTime) { return }
      const dataJson = {
        email: this.forgetForm.email,
        imgcode: this.forgetForm.imgcode,
        codeid: this.codeid
      }
      this.forgetForm.vercode = ''
      sendMail(dataJson).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '發送短訊成功',
            center: true,
            type: 'success'
          })
          this.forgetForm.vercode = ''
          this.showTime = true
          const _this = this
          this.timeCount = 59
          clearInterval(this.timer)
          this.timer = setInterval(function () {
            _this.timeCount--
            if (_this.timeCount === 0) {
              _this.showTime = false
              _this.timeCount = 60
              clearInterval(_this.timer)
            }
          }, 1000)
        } else {
          this.$message({
            message: res.message,
            center: true,
            type: 'error'
          })
          this.changeImgcode()
          this.forgetForm.imgcode = ''
        }
      })
    },
    handleNext (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({
            name: 'reset',
            params: {
              email: this.forgetForm.email,
              imgcode: this.forgetForm.imgcode,
              vercode: this.forgetForm.vercode,
              codeid: this.codeid
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    backToLogin () {
      this.$router.push({
        name: 'login'
      })
    }
  },
  components: {
    vHeader: Header,
    EmailInputFormItem,
    ImgcodeFormItem,
    VercodeInputFormItem
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.forget-wrapper{
  padding: 37px 49px 57px;
  .header{
    margin-bottom: 75px;
  }
  .title{
    width: 140px;
    margin: 0 auto 28px;
    padding-bottom: 12px;
    font-size: 34px;
    color:rgba(255,255,255,1);
    line-height: 36px;
    text-align: center;
    border-bottom: 7px solid #fff;
  }
  .page-description{
    width: 390px;
    height: 61px;
    margin: 0 auto 67px;
    font-size: 26px;
    color: rgba(206,166,207,1);
    line-height: 36px;
    text-align: center;
  }
  .el-form{
    margin-bottom: 278px;
  }
  .submit-btn{
    width: 100%;
    height: 91px;
    margin-bottom: 36px;
    border-radius: 46px;
    font-size: 36px;
    border: none;
    border: none;
    background: linear-gradient(to right, #1293FF, #6FBDFF);
    box-shadow: 0px 0px 4px 4px rgba(24,150,255,0.58);
  }
}
.tip-description{
  position: relative;
  box-sizing: border-box;
  width: 152px;
  padding: 0 20px;
  margin: 0 auto;
  font-size: 26px;
  color:rgba(255,255,255,1);
  line-height: 26px;
  text-align: center;
  &:before{
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 15px;
    height: 9px;
    background-image: url("../assets/images/arrow.png");
    background-size: cover;
    transform: rotate(-90deg);
  }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .tip-description:before
    background-image: url("../assets/images/arrow@2x.png");
    background-size: cover;

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .tip-description:before
    background-image: url("../assets/images/arrow@3x.png");
    background-size: cover;
</style>
